<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
<!-- PropTypes文件 -->
<script src='https://unpkg.com/prop-types@15.6.2/prop-types.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>
        /*
            对于react和vue，一直都有一道经典的面试题，那就是diff算法。

            1.虚拟DOM中key的作用
                    - 简单来说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用
                    - 详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】
                                        随后react进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

                                        a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
                                            1.若虚拟DOM中内容没有改变，直接使用之前的真实DOM
                                            2.若虚拟DOM中内容改变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
                                        b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
                                            根据数据创建新的真实DOM，随后渲染到页面
            
            2. 用index作为key可能会带来的问题：
                    1. 若对数据进行逆序添加、逆序删除等破坏顺序的操作
                            会产生没有必要的真实DOM更新  ==>  界面效果没有问题，但效率低
                    2. 如果结构中还包含着输入类的的DOM
                            会产生错误DOM更新 ==> 界面有问题
                    3. 不过如果你对于数据只是做个展示的小案例，就几条数据，也没有什么逆序操作，那么使用index作为key也不是不行

            3. 开发中如何选择key？
                    1. 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号等
                    2. 如果只是简单的数据展示，用index也可以
        */
        class Demo extends React.Component{
            state = {date:new Date()}

            componentDidMount(){
                setInterval(() => {
                    this.setState({date:new Date()})
                }, 1000);
            }

            render(){
                return (
                    <div>
                    <h1>{this.state.date.toTimeString()}</h1>    
                    <h2>123123</h2>
                </div>
                )
            }
        }

        ReactDOM.render(<Demo/>,document.getElementById('app'))
    </script>
</body>

</html>